<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</head>
<body>
<div class="ui container" style="margin-top: 40px;">
    <tr>
        <th colspan="4">
            <a th:href="@{/logout}" class="ui right floated red button" onclick="javascript:return p_logout()"><i class="logout icon"></i>注销</a>
        </th>
    </tr>
</div>
<br>
<div class="ui container" style="margin-top: 40px;">
    <table class="ui celled table">
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>班级</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item:${userCruds.list}">
            <td data-label="姓名" th:text="${item.name}">1</td>
            <td data-label="年龄" th:text="${item.age}">2</td>
            <td data-label="性别" th:text="${item.sex}">3</td>
            <td data-label="班级" th:text="${item.classes}">4</td>
            <td data-label="地址" th:text="${item.address}">5</td>
            <td>
                <a class="ui button mini teal" th:href="@{/admin/edit/{id}(id=${item.id})}"><i class="edit icon"></i>编辑</a>
                <a class="ui button mini red" th:href="@{/admin/delUser/{id}(id=${item.id})}" onclick="javascript:return p_del()"><i class="trash icon"></i>删除</a>
            </td>
        </tr>
        </tbody>
    </table>
    <!--分页-->
    <div class="ui bottom attached segment m-opacity stackable grid">
        <div class="three wide column" align="center">
            <a class="item" th:href="@{/admin/(pageNum=${userCruds.hasPreviousPage}?${userCruds.prePage}:1)}"
               th:unless="${userCruds.isFirstPage}">上一页</a>
        </div>

        <div class="ten wide column" align="center">
            <p><span th:text="${userCruds.pageNum}"></span> / <span th:text="${userCruds.pages}"></span></p>
        </div>

        <div class="three wide column" align="center">
            <a class="item"
               th:href="@{/admin/(pageNum=${userCruds.hasNextPage}?${userCruds.nextPage}:${userCruds.pages})}"
               th:unless="${userCruds.isLastPage}">下一页</a>
        </div>
    </div>
    <tfoot class="full-width">
    <tr>
        <th></th>
        <th colspan="4">
            <a th:href="@{/admin/update}" class="ui right floated small primary labeled icon button"><i class="user icon"></i> 添加用户</a>
        </th>
    </tr>
    </tfoot>
</div>
<script>

    function p_del() {
        var msg = "确定要删除吗？";
        if (confirm(msg) == true) {
            return true;
        } else {
            return false;
        }
    }
    function p_logout() {
        var msg = "确定要注销吗？";
        if (confirm(msg) == true) {
            return true;
        } else {
            return false;
        }
    }
</script>
</body>
</html>